<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js</title>
    <link rel="stylesheet" href="style.css">
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Three.js</h1>
    <nav>
        <ul>
            <li>
                <a href="#first-scene">1 第一个场景</a>
                <ul>
                    <li><a href="#create-scene">1.1 创建场景</a></li>
                    <li><a href="#render-scene">1.2 渲染场景</a></li>
                    <li><a href="#animate-cube">1.3 让立方体动起来</a></li>
                </ul>
            </li>
        </ul>
    </nav>


    <p><a href="https://threejs.org/" target="_blank">Three.js</a> 是一个 JavaScript 3D 库。</p>

    <h2 id="first-scene">1 第一个场景</h2>
    <h3 id="create-scene">1.1 创建场景</h3>
    <p>创建一个场景，其中包含一个旋转立方体。要显示物体，需要提前准备三件东西：scene, camera 和 renderer。</p>
    <pre>const scene = new THREE.Scene();
// field of view, aspect ratio, near, far
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);</pre>
    <p>增加一个立方体</p>
    <pre>const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;</pre>

    <h3 id="render-scene">1.2 渲染场景</h3>
    <p>现在你还看不到任何东西，因为还没开始渲染。以下代码开启渲染循环。</p>
    <pre>function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
</pre>

    <h3 id="animate-cube">1.3 让立方体动起来</h3>
    <p>现在你只能看到静止的立方体，把以下代码放到 <code>animate</code> 函数的 <code>renderer.render</code> 语句之上，就可以让它动起来：</p>
    <pre>cube.rotation.x += 0.01;
cube.rotation.y += 0.01;</pre>

    <script src="js/three.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(200, 200);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>